<!DOCTYPE html>
<html
  lang="zh"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
>
  <head>
    <th:block th:include="include :: header('实时资料知识库')" />
    <style>
      .knowledge-container {
        display: flex;
        height: calc(100vh - 200px);
        margin: 15px;
        gap: 15px;
      }

      .document-list {
        flex: 0 0 300px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 15px;
        overflow-y: auto;
      }

      .preview-area {
        flex: 1;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 15px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }

      .document-item {
        padding: 10px;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .document-item:hover {
        background-color: #f5f5f5;
      }

      .document-item.active {
        background-color: #e3f2fd;
        border-left: 3px solid #2196f3;
      }

      .document-title {
        font-weight: bold;
        margin-bottom: 5px;
        color: #333;
      }

      .document-meta {
        font-size: 12px;
        color: #999;
      }

      .preview-content {
        flex: 1;
        min-height: 400px;
      }

      .preview-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #999;
        font-size: 16px;
      }

      .pdf-viewer {
        width: 100%;
        height: 100%;
        min-height: 600px;
        border: none;
      }

      .search-collapse {
        background: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 15px;
      }

      .select-list ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .select-list li {
        margin-right: 20px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
      }

      .select-list label {
        margin-right: 8px;
        white-space: nowrap;
      }

      .select-list input,
      .select-list select {
        width: 150px;
      }
    </style>
  </head>
  <body class="gray-bg">
    <div class="container-div">
      <div class="row">
        <div class="col-sm-12 search-collapse">
          <form id="formId">
            <div class="select-list">
              <ul>
                <li>
                  <label>资料标题：</label>
                  <input type="text" name="title" />
                </li>
                <!--                        <li>-->
                <!--                            <label>来源：</label>-->
                <!--                            <input type="text" name="source"/>-->
                <!--                        </li>-->
                <li>
                  <label>内容类型：</label>
                  <select name="contentType">
                    <option value="">所有</option>
                    <option value="text">文本</option>
                    <option value="pdf">PDF</option>
                    <option value="html">网页</option>
                  </select>
                </li>
                <!--                        <li>-->
                <!--                            <label>状态：</label>-->
                <!--                            <select name="status">-->
                <!--                                <option value="">所有</option>-->
                <!--                                <option value="1">启用</option>-->
                <!--                                <option value="0">禁用</option>-->
                <!--                            </select>-->
                <!--                        </li>-->
                <li>
                  <a
                    class="btn btn-primary btn-rounded btn-sm"
                    onclick="searchDocuments()"
                    ><i class="fa fa-search"></i>&nbsp;搜索</a
                  >
                  <a
                    class="btn btn-warning btn-rounded btn-sm"
                    onclick="resetForm()"
                    ><i class="fa fa-refresh"></i>&nbsp;重置</a
                  >
                </li>
              </ul>
            </div>
          </form>
        </div>

        <div
          class="btn-group-sm"
          id="toolbar"
          role="group"
          style="padding: 0 15px"
        >
          <a
            class="btn btn-success"
            onclick="$.operate.add()"
            shiro:hasPermission="dj:realtime:material:add"
            style="display: none"
          >
            <i class="fa fa-plus"></i> 新增
          </a>
          <a
            class="btn btn-primary single disabled"
            onclick="editDocument()"
            shiro:hasPermission="dj:realtime:material:edit"
            style="display: none"
          >
            <i class="fa fa-edit"></i> 修改
          </a>
          <a
            class="btn btn-danger multiple disabled"
            onclick="removeDocuments()"
            shiro:hasPermission="dj:realtime:material:remove"
            style="display: none"
          >
            <i class="fa fa-remove"></i> 删除
          </a>
          <a
            class="btn btn-warning"
            onclick="downloadPdfFile()"
            shiro:hasPermission="dj:realtime:material:export"
          >
            <i class="fa fa-download"></i> 下载
          </a>
        </div>

        <div class="knowledge-container">
          <div class="document-list">
            <h5>资料目录</h5>
            <div id="documentList">
              <!-- 文档列表将通过JS动态加载 -->
            </div>
          </div>

          <div class="preview-area">
            <h5>预览区域</h5>
            <div id="previewContent" class="preview-content">
              <div class="preview-placeholder" id="previewPlaceholder">
                请选择左侧的资料进行预览
              </div>
              <!--                    <iframe id="pdfViewer" class="pdf-viewer" style="display: none;"></iframe>-->
              <iframe
                id="pdfViewer"
                src=""
                frameborder="0"
                style="width: 100%; height: 100%; display: none"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:src="@{/ruoyi/js/study-time-recorder.js}"></script>
    <script th:inline="javascript">
          var editFlag = [[${@permission.hasPermi('dj:realtime:material:edit')}]];
          var removeFlag = [[${@permission.hasPermi('dj:realtime:material:remove')}]];
          var prefix = ctx + "dj/realtime/material";
          var currentDocuments = [];
          var currentDocumentUrl = null;
          var currentDocumentName = null;


      // 页面加载完成后自动开始记录学习时长
      $(document).ready(function () {
        console.log("页面加载完成，开始记录学习时长");
        // 开始记录学习视频模块的学习时长（模块级记录）
        StudyTimeRecorder.start("realtime", 0);
      });

      // 页面卸载时触发
      window.addEventListener("unload", function (event) {
        console.log("unload 事件触发，结束学习记录");
        StudyTimeRecorder.end(true);
      });

          $(function() {
              // 初始化演示数据
              // initDemoData();
              loadDocuments();
          });



          // 初始化演示数据
          function initDemoData() {
              var demoDocuments = [
                  {
                      id: 1,
                      title: "《中国共产党农村基层组织工作条例》全文",
                      source: "江南大学马列学院",
                      contentType: "pdf",
                      contentUrl: "/profile/upload/static/《中国共产党农村基层组织工作条例》全文.pdf",
                      readCount: 128,
                      status: 1,
                      publishTime: "2025-09-01",
                      createTime: "2025-09-01"
                  },
                  {
                      id: 2,
                      title: "党委（党组）落实全面从严治党主体责任规定",
                      source: "江南大学马列学院",
                      contentType: "pdf",
                      contentUrl: "/profile/upload/static/党委（党组）落实全面从严治党主体责任规定.pdf",
                      readCount: 96,
                      status: 1,
                      publishTime: "2025-08-28",
                      createTime: "2025-08-28"
                  }
              ];

              currentDocuments = demoDocuments;
              renderDocumentList(demoDocuments);
          }

          function loadDocuments(params = {}) {
              $.post(prefix + "/list", params, function(result) {
              console.info(result);
                  currentDocuments = result;
                  renderDocumentList(result);
              });
          }

          function downloadPdfFile() {
              const a = document.createElement('a');
              a.href  = currentDocumentUrl;
              a.download  = currentDocumentName;
              a.click();
          }

          function renderDocumentList(documents) {
              var html = '';
              if (documents.length === 0) {
                  html = '<div class="preview-placeholder">暂无资料</div>';
              } else {
                  documents.forEach(function(doc, index) {
                      html += '<div class="document-item" onclick="previewDocument(' + index + ')">';
                      html += '<div class="document-title">' + doc.title + '</div>';
                      html += '<div class="document-meta">';
                      html += '<div>来源: ' + (doc.source || '无') + '</div>';
                      html += '<div>类型: ' + (doc.contentType || '未知') + '</div>';
                      html += '<div>时间: ' + (doc.publishTime || doc.createTime || '未知') + '</div>';
                      html += '</div>';
                      html += '</div>';
                  });
              }
              $('#documentList').html(html);
          }

          function previewDocument(index) {
              var doc = currentDocuments[index];
              $('.document-item').removeClass('active');
              $('.document-item').eq(index).addClass('active');

              // 隐藏占位符
              $('#previewPlaceholder').hide();

              if (doc.contentType === 'pdf' && doc.contentUrl) {
                  // 显示PDF预览
                  $('#pdfViewer').show();
                  var pdfUrl = ctx  + doc.contentUrl;
                  // 如果是相对路径，加上上下文路径
      <!--            if (pdfUrl.indexOf('http') !== 0 && pdfUrl.indexOf('/') === 0) {-->
      <!--                pdfUrl = ctx + pdfUrl;-->
      <!--            }-->
                  currentDocumentUrl = pdfUrl;
                  currentDocumentName = doc.title;
                  $('#pdfViewer').attr('src', pdfUrl);
              } else {
                  // 隐藏PDF查看器
                  $('#pdfViewer').hide();
                  // 显示占位符或文本内容
                  if (doc.contentType === 'text') {
                      $('#previewPlaceholder').html('<p>文本内容预览功能待完善</p>').show();
                  } else if (doc.contentType === 'html') {
                      $('#previewPlaceholder').html('<p>网页内容预览功能待完善</p>').show();
                  } else {
                      $('#previewPlaceholder').html('<p>该文件类型暂不支持预览，请下载查看</p>').show();
                  }
              }
          }

          function searchDocuments() {
              var params = {};
              var form = $('#formId');
              params.title = form.find('input[name="title"]').val();
              params.source = form.find('input[name="source"]').val();
              params.contentType = form.find('select[name="contentType"]').val();
              params.status = form.find('select[name="status"]').val();
              loadDocuments(params);
          }

          function resetForm() {
              $('#formId')[0].reset();
              loadDocuments();
          }

          function editDocument() {
              if ($('.document-item.active').length > 0) {
                  var index = $('.document-item.active').index();
                  var doc = currentDocuments[index];
                  $.operate.edit(doc.id);
              } else {
                  $.modal.alertWarning("请先选择要修改的资料");
              }
          }

          function removeDocuments() {
              var selectedItems = $('.document-item.active');
              if (selectedItems.length > 0) {
                  var index = selectedItems.index();
                  var doc = currentDocuments[index];
                  $.operate.remove(doc.id);
              } else {
                  $.modal.alertWarning("请先选择要删除的资料");
              }
          }
    </script>
  </body>
</html>
